<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <Hint :show-prompt="true">
        <!-- 左侧插槽 -->
        <span
          slot="before"
        >共<span style="color: #409eff; margin: 0 3px; font-size: 16px">{{
          page.total
        }}</span>条数据</span>
        <!-- 右侧插槽 -->
        <div slot="after">
          <el-button
            size="small"
            type="success"
            @click="$router.push('import')"
          >excel导入</el-button>
          <el-button
            size="small"
            type="danger"
            @click="exportFn"
          >excel导出</el-button>
          <el-button
            size="small"
            type="warning"
            @click="complexExportFn"
          >复杂表头excel导出</el-button>
          <!-- 使用混入方法查看本地用户是否有此权限标识 没有则隐藏按钮 标识为后台默认发送保存的本地的，可以写死-->
          <el-button
            v-show="checkPermission('aa')"
            size="small"
            type="primary"
            @click="isDialog = true"
          >新增员工</el-button>
        </div>
      </Hint>

      <!-- 员工表格 -->
      <el-card v-loading="loading" style="margin-top: 10px">
        <!-- stripe 斑马纹 border 边框 -->
        <el-table border :data="list" stripe>
          <!-- sortable 排序 type="index" 按数字从小到大显示 -->
          <el-table-column
            label="序号"
            sortable=""
            type="index"
            align="center"
            width="100%"
          />
          <el-table-column
            label="姓名"
            sortable=""
            prop="username"
            align="center"
          />
          <el-table-column
            label="头像"
            sortable=""
            prop="staffPhoto"
            align="center"
          >
            <!-- 使用插槽显示头像 -->
            <template v-slot="{ row }">
              <el-image
                style="border-radius: 50%; overflow: hidden; cursor:pointer;"
                :src="row.staffPhoto"
                alt="头像"
                fit="fit"
                @click="qrCode(row.staffPhoto)"
              >
                <!-- slot 为error 时 图片没有被加载出来就会显示下面的图片 -->
                <template slot="error">
                  <el-image
                    style="
                      height: 60px;
                      width: 60px;
                      border-radius: 50%;
                      border-radius: 50%;
                      overflow: hidden;
                      cursor:pointer;
                    "
                    :src="defaultIcon"
                    alt="头像"
                    fit="fit"
                    @click="qrCode(row.staffPhoto)"
                  />
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="手机号"
            sortable=""
            prop="mobile"
            align="center"
          />
          <el-table-column
            label="工号"
            sortable=""
            prop="workNumber"
            align="center"
          />
          <el-table-column
            label="聘用形式"
            sortable=""
            prop="formOfEmployment"
            align="center"
            :formatter="hireForm"
          />
          <el-table-column
            label="部门"
            sortable=""
            prop="departmentName"
            align="center"
          />
          <el-table-column
            label="入职时间"
            sortable=""
            prop="correctionTime"
            align="center"
          >
            <!-- 使用插槽获取此标签时间，并使用过滤器格式化时间 -->
            <template v-slot="{ row }">
              {{ row.correctionTime | formatDate() }}
            </template>
          </el-table-column>
          <el-table-column
            label="账户状态"
            sortable=""
            prop="enableState"
            align="center"
          >
            <!-- 插槽处理账户状态  -->
            <template v-slot="{ row }">
              <el-switch
                :value="row.enableState === 1"
                active-color="#13ce66"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" align="center" width="250%">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >查看</el-button>
              <el-button
                type="text"
                size="small"
                style="color: #67c23a"
              >转正</el-button>
              <el-button
                type="text"
                size="small"
                style="color: #e6a23c"
              >调岗</el-button>
              <el-button
                type="text"
                size="small"
                style="color: #f56c6c"
              >离职</el-button>
              <el-button
                type="text"
                size="small"
                style="color: #909399"
                @click="assignFn(row.id)"
              >角色</el-button>
              <el-button
                type="text"
                size="small"
                style="color: #e74c3c"
                @click="delFn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 页码 -->
        <el-row style="margin-top: 30px">
          <el-col max-width="100%" align="end">
            <el-pagination
              max-width="100%"
              :page-sizes="sizes"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 二维码弹窗 -->
    <el-dialog
      title="二维码"
      :visible.sync="showQR"
    >
      <el-row type="flex" justify="center">
        <canvas ref="cancas" style="text-align: center" />
      </el-row>
    </el-dialog>

    <!-- 添加员工弹窗 -->
    <Addemployees :show-dialog.sync="isDialog" />

    <!-- 角色分配弹窗 -->
    <component :is="AssignComp" ref="assign" :show-assign.sync="showAssign" :user-id="userId" />
  </div>
</template>

<script>
import QrCode from 'qrcode'
import AssignRole from './components/assign-role.vue'
import { getHrTableApi, delEmployeeApi, userInFormationApi } from '@/api'
import EmployeeEnum from '@/api/constant/employees'
import Addemployees from './components/add-employees'
import { excelEduce } from '@/utils/excelexport'
export default {
  components: {
    Addemployees,
    AssignRole
  },
  data() {
    return {
      AssignComp: 'AssignRole', // 动态组件写法
      list: [], // 员工数据
      page: {
        page: 1, // 页码
        size: 10, // 每页条数
        total: 0 // 员工总数
      },
      loading: false, // 加载状态
      sizes: [], // 可切换的每页条数
      defaultIcon: require('@/assets/common/logo-gif.gif'), // 用户默认头像
      isDialog: false, // 弹出框状态
      showQR: false, // 二维码弹窗状态
      showAssign: false, // 角色弹窗状态
      userId: '' // 用户Id
    }
  },
  created() {
    this.getHrTable()
  },
  methods: {
    // 获取员工列表
    async getHrTable() {
      this.loading = true
      const { total, rows } = await getHrTableApi(this.page)
      this.list = rows
      this.page.total = total
      // 处理选择显示数
      this.sizes = []
      // 向上取整
      const k = Math.ceil(this.page.total / 10)
      for (let i = 0; i < k; i++) {
        this.sizes.push((i + 1) * 10)
      }
      this.loading = false
    },

    // 点击切换每页显示条数 触发
    handleSizeChange(val) {
      // 每页显示页数
      this.page.size = val
      this.getHrTable()
    },

    // 页码变化时触发
    async handleCurrentChange(val) {
      this.page.page = val
      this.getHrTable()
    },

    // 饿了么ui属性绑定函数 格式化 聘用形式显示内容 row 每行的具体数据  column 每行具体属性 cellValue prop绑定的值 index 每行的下标0开始
    hireForm(row, column, cellValue, index) {
      // 查找枚举中符合条件的对象并返回
      const obj = EmployeeEnum.hireType.find(
        (item) => item.id === parseInt(cellValue)
      )
      // 有值则显示， 否则显示未知
      return obj ? obj.value : '未知'
    },

    // 点击显示二维码
    qrCode(staffPhoto) {
      if (staffPhoto) {
        this.showQR = true
        // 因为 dom更新是异步的， cancas还没有创建不能直接获取，$nextTick可以获取异步更新后的数据
        this.$nextTick(() => {
          // 二维码生成 第一个参数接收 要承载二维码的dom实例， 第二个则是要加密的内容（可以是任何东西）
          QrCode.toCanvas(this.$refs.cancas, staffPhoto)
        })
      } else {
        this.$message.warning('该用户还未上传头像！')
      }
    },

    // 点击 -> 删除
    async delFn(id) {
      try {
        await this.$confirm('确定删除该用户？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.loading = true
        await delEmployeeApi(id)
        this.$message.success('删除员工cehngg')
        this.getHrTable()
      } catch (error) {
        this.$notify.info({
          title: '提示',
          message: error.message || '已取消操作！'
        })
      } finally {
        this.loading = false
      }
    },

    // 复杂表头导出
    async complexExportFn() {
      const { rows } = await getHrTableApi({ page: 1, size: this.page.total })
      // 调用封装的导出 excel方法
      const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']] // 复杂表头格式
      const merges = ['A1:A2', 'B1:F1', 'G1:G2'] // 合并行列
      excelEduce({ rows, multiHeader, merges, filename: '复杂员工信息表' })
    },

    // 点击 -> 导出文件
    async exportFn() {
      const { rows } = await getHrTableApi({ page: 1, size: this.page.total })
      console.log(rows)
      excelEduce({ rows })
    },

    //     const arrObj = []
    // rows.map((item, index) => {
    //   const arr = []
    //   for (const key in headers) {
    //     // 在判断是否为聘用形式
    //     if (headers[key] === 'formOfEmployment') {
    //       // 判断是否有值 并过滤 汉字 内容为空的项
    //       item[headers[key]]
    //         ? arr.push(
    //           EmployeeEnum.hireType.find((obj) => {
    //             // 判断是否为非数字字符串
    //             if (isNaN(parseInt(item[headers[key]]))) {
    //               return item[headers[key]]
    //             } else {
    //               return obj.id === parseInt(item[headers[key]])
    //             }
    //           }).value
    //         )
    //         : arr.push('未知')
    //     } else {
    //       arr.push(item[headers[key]])
    //     }
    //   }
    //   arrObj[index] = arr
    // })
    // return arrObj

    // 点击 -> 弹出角色弹窗
    async assignFn(id) {
      this.userId = id
      const { roleIds } = await userInFormationApi(id)
      this.$refs.assign.userIds = roleIds
      this.showAssign = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep.cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .el-image {
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
